<template>
  <div id="headerCommon">
    <!-- 顶部 -->
    <div class="headerCommon">项目管理系统主界面
    </div>
    <div class="tab">
      <div class="tabs-top">菜单</div>
      <div class="tabs-tab">
        <a-tabs @contextmenu.native="e => onContextmenu(e)" :active-key="activePage" style="margin-top: -8px; margin-bottom: 8px" :hide-add="true" type="editable-card" @change="changePage" @edit="editPage" size="large">
          <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
            <span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <div class="tabs-wrap">
      <!-- 左侧导航栏部分 -->
      <div class="tabs">
        <a-menu mode="inline" :selectedKeys="[current]" @click="handleClick">
          <a-menu-item v-for="item in menuList" :key="item.key">
            <router-link :to="item.path">
              <span>{{item.name}}</span></router-link>
          </a-menu-item>
        </a-menu>
      </div>
      <!-- 右侧内容 -->
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'headerCommon',
  data() {
    return {
      pageList: [],
      linkList: [],
      activePage: '',
      multipage: true,
      current: '1',
      menuList: [
        {
          key: '1',
          name: "项目登记",
          path: "/checkIn"
        },
        {
          key: '2',
          name: "项目立项",
          path: "/project"
        },
        {
          key: '3',
          name: "项目实施",
          path: "/implement"
        },
        {
          key: '4',
          name: "项目经营",
          path: "/operate"
        },
        {
          key: '5',
          name: "项目分包",
          path: "/subcontract"
        }, {
          key: '6',
          name: "项目考核",
          path: "/assess"
        }
      ]
    }
  },
  watch: {
    '$route': function (newRoute) {
      this.activePage = newRoute.fullPath
      if (!this.multipage) {
        this.linkList = [newRoute.fullPath]
        this.pageList = [newRoute]
      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
        this.linkList.push(newRoute.fullPath)
        this.pageList.push(newRoute)
      }
      let isHas = false
      this.menuList.forEach((item, index) => {
        if (item.path === newRoute.fullPath) {
          this.current = String(index + 1)
          isHas = true
        }
      })
      if (!isHas) { this.current = '' }
    },
    'activePage': function (key) {
      this.$router.push(key)
    },
    'multipage': function (newVal) {
      if (!newVal) {
        this.linkList = [this.$route.fullPath]
        this.pageList = [this.$route]
      }
    }
  },
  // created() {
  //   // this.pageList.push(this.$route)
  //   // this.linkList.push(this.$route.fullPath)
  //   if(this.$route.fullPath==='/'){
  //     this.activePage = '/checkIn'
  //   }else{
  //     this.activePage = this.$route.fullPath
  //   }
  // },
  methods: {
    handleClick(e) {
      this.current = e.key
    },
    changePage(key) {
      this.activePage = key
    },
    editPage(key, action) {
      this[action](key)
    },
    remove(key) {
      if (this.pageList.length === 1) {
        this.$message.warning('这是最后一页，不能再关闭了啦')
        return
      }
      this.pageList = this.pageList.filter(item => item.fullPath !== key)
      let index = this.linkList.indexOf(key)
      this.linkList = this.linkList.filter(item => item !== key)
      index = index >= this.linkList.length ? this.linkList.length - 1 : index
      this.activePage = this.linkList[index]
    }
  }
}
</script>

<style>
#headerCommon {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.headerCommon {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  background-color: #3098ed;
  font-size: 20px;
  color: white;
}
.tabs-wrap {
  display: flex;
  width: 100%;
  min-height: 100%;
  background: #f2f2f2;
}
.tabs-top {
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  margin-right: -2px;
  font-size: 20px;
  background-color: #f2f2f2;
  color: #999999;
}
.tab {
  width: 100%;
  display: flex;
}
.tabs-top {
  flex: 0 0 250px;
}
.tabs-top span {
  padding: 8px 16px;
  display: block;
}
.tabs-tab {
  flex: 3;
  background: #f2f2f2;
  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.3);
  line-height: 70px;
  padding-left: 20px;
  padding-top: 15px;
  font-size: 20px;
  color: #999999;
}
.tabs {
  flex: 0 0 250px;
  min-height: 100%;
  padding-top: 20px;
  padding-right: 10px;
  background: #fff;
}
.content {
  flex: 3;
  min-height: 100%;
  margin: 0 10px;
}
.ant-menu-item {
  margin-top: 10px;
  height: 50px !important;
  line-height: 50px !important;
  background: #34495e;
  color: #fff;
}
.ant-menu-item span {
  color: #fff;
}
.ant-menu-item-selected span {
  color: #1890ff;
}
.ant-menu-item-active span {
  color: #1890ff;
}
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 8px 16px;
}
</style>
